import React from 'react'
import { Card, Button, Row, Col, Input, Form, Select, Radio , DatePicker, Space,message,Breadcrumb} from 'antd';
import Axios from "axios";
import '../../assets/style/addyouhui.css'

const { Option } = Select;
const { TextArea } = Input;
const { RangePicker } = DatePicker;

class youhui extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: '',
      title: '',
      path: '',
      image: '',
      passtime: '',
    }
  }
  change = event => {
    const {name, value} = event.target
    this.setState({
      [name]: value
    })
  }
  onChange = (value, dateString) => {
    this.setState({
      passtime: dateString
    })
  }
  submit = () => {
    Axios.post('news_saveUpdate', this.state).then((data) => {
      if (data.data.ok) {
        message.info('添加成功');
        this.props.query()
      }
    })
  }
  render() {
    return(
      <div>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>优惠券管理</Breadcrumb.Item>
          <Breadcrumb.Item>添加优惠券</Breadcrumb.Item>
        </Breadcrumb>
          <Card title='新增优惠券信息'>
            {/*第一行title和按钮*/}
            <Row className={'firstline'}>
              <Col span={12} className={'titleText'}>基本信息</Col>
              <Col span={12} className={'rightcol'}>
                <Button type="primary" className={'btnbtn'} onClick={()=>this.props.history.push("/home/youhuilist")}>确定</Button>
              <Button className={'btnbtn'} onClick={() => this.props.history.push("/home/youhuilist")}>取消</Button>
              </Col>
            </Row>
            {/*表单*/}
            <Form onFinish={this.addYouhui}>
              <Row span={24}>
                  <Col span={12}>
                    <Form.Item name="cou_name" label="优惠券名称" colon={true}>
                      <Row>
                        <Input placeholder="请填写优惠券名称" style={{ width: 240 }}/>
                      </Row>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item name="cou_caption" label="优惠券副标题">
                      <Row>
                        <Input placeholder="请填写优惠券副标题" style={{ width: 240 }}/>
                      </Row>
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item name="cou_type" label="优惠券类型" colon={true}>
                      <Row>
                        <Select defaultValue="满减券" style={{ width: 240 }}>
                          <Option value="0">满减券</Option>
                          <Option value="1">立减券</Option>
                          <Option value="2">折扣券</Option>
                          <Option value="3">兑换码</Option>
                        </Select>
                      </Row>
                    </Form.Item>
                  </Col>
                  <Col span={4}>
                    <Form.Item name="cou_man" label="满">
                      <Row>
                        <Input style={{ width: 150 }} />
                      </Row>
                    </Form.Item>
                  </Col>
                  <Col span={8} className={'leftarea'}>
                    <Form.Item name="cou_jian" label="减">
                      <Row>
                        <Input style={{ width: 150 }} />
                      </Row>
                    </Form.Item>
                  </Col>
                  <Col span={24}>
                    <Form.Item name="cou_count" label="发放数量" colon={true}>
                      <Row>
                        <Input placeholder="请填写发放数量" style={{ width: 240 }}/>
                      </Row>
                    </Form.Item>
                  </Col>
                <Col span={24}>
                  <Form.Item name="cou_description" label="使用说明" colon={true}>
                    <Row>
                      <TextArea showCount maxLength={500} placeholder="请填写使用说明" style={{ width: 480 }}/>
                    </Row>
                  </Form.Item>
                </Col>
              </Row>
              {/*第二行title*/}
              <Row className={'firstline'}>
                <Col span={24} className={'titleText'}>基本规则</Col>
              </Row>
              <Row span={24}>
              <Col span={12}>
                <Form.Item name="cou_userType" label="用户类型" colon={true}>
                  <Row>
                    <Select defaultValue="新用户" style={{ width: 240 }}>
                      <Option value="0">新用户</Option>
                      <Option value="1">老用户</Option>
                    </Select>
                  </Row>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name="cou_xianGet" label="每人限领">
                  <Row>
                    <Input style={{ width: 240 }} />
                  </Row>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name='cou_startExpireTime' label="有效期">
                <Radio.Group>
                  <Radio value={1} className={'radiotop'}>
                    固定日期
                    <Space direction="vertical" size={12} className={'alignarea'}>
                      <RangePicker onChange={this.onChange}/>
                    </Space>
                  </Radio>
                  <Radio value={2}>
                    领取后当天生效，有效期<Input placeholder="天" style={{ width: 150 }}  className={'alignarea'}/>
                  </Radio>
                </Radio.Group>
                </Form.Item>
              </Col>
                <Col span={24}>
                  <Form.Item name="cou_skipLink" label="跳转链接" colon={true}>
                    <Row>
                      <Input placeholder="请填写跳转链接" style={{ width: 480 }}/>
                    </Row>
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Card>
        </div>
    )
  }
}

export {youhui as default}